<template>
	<view class="my-order">
		<view class="order-title">
			<view class="title">
				我的订单
			</view>
			<view class="all" @click="goAllOrder">
				<view class="text">全部</view>
				<view class="icon"></view>
			</view>
		</view>
		<view class="orderBar">
			<view class="orderBar-item" v-for="(item,index) in orderBarData" :key="index" @click="goOrder(item)">
				<view class="icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }">

				</view>
				<view class="text">
					{{item.text}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderBarData: [{
					id: 0,
					text: "待付款",
					icon: "/static/my/order_1.png"
				}, {
					id: 1,
					text: "待发货",
					icon: "/static/my/order_2.png"
				}, {
					id: 2,
					text: "待收获",
					icon: "/static/my/order_3.png"
				}, {
					id: 3,
					text: "待归还",
					icon: "/static/my/order_4.png"
				}, {
					id: 4,
					text: "待评价",
					icon: "/static/my/order_5.png"
				}]
			}
		},
		methods: {
			//单独跳转订单
			goOrder(item) {
				if (item.id == 4) {
					uni.navigateTo({
						url: `/pages/mys/myOrder/myOrder?index=0`
					})
				} else {
					uni.navigateTo({
						url: `/pages/mys/myOrder/myOrder?index=${item.id+1}`
					})
				}

			},
			//跳转全部订单
			goAllOrder() {
				uni.navigateTo({
					url: `/pages/mys/myOrder/myOrder?index=0`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-order {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		.order-title {
			width: 95%;
			height: 80rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;

			.title {
				font-size: 34rpx;
				font-weight: bold;
			}

			.all {
				display: flex;
				align-items: center;

				.text {
					font-size: 30rpx;
					color: #bcbcbc;
					margin-right: 15rpx;
				}

				.icon {
					width: 20rpx;
					height: 20rpx;
					background-image: url("/static/my/right_ccc.svg");
					background-size: contain;
				}
			}
		}

		.orderBar {
			width: 95%;
			height: 160rpx;
			display: flex;
			justify-content: space-between;

			.orderBar-item {
				width: 100rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;

				.icon {
					width: 60rpx;
					height: 60rpx;
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}

				.text {
					width: 100%;
					text-align: center;
					font-size: 30rpx;
				}
			}

		}
	}
</style>